import {
    IonContent,
    IonPage,
    IonLabel,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonTabBar,
    IonTabButton,
    IonIcon,
    IonButton,
    IonList,
    IonItem
} from '@ionic/react';
import React from 'react';
import global_variable from '../shared/global_variable.json';
import { home, help, map, person, card, contrast, informationCircle, wallet, logoBitcoin } from 'ionicons/icons';

var hidden = true;
var myInfo = true;
if (document.cookie.indexOf("userid=") > 0) {
    myInfo = false;
    hidden = false;
}

const My: React.FC = () => {

    const LogOut = async () => {
        var arrCookie = document.cookie.split(';');
        var accountid = "";
        for (var i = 0; i < arrCookie.length; i++) {
            var arr = arrCookie[i].split("=");
            //找到名称为userId的cookie，并返回它的值
            if ("userid" === arr[0].trim()) {
                accountid = arr[1];
            }
        }
        //获取当前时间
        var date = new Date();
        //将date设置为过去的时间
        date.setTime(date.getTime() / 10000000);
        //将userId这个cookie删除
        document.cookie = "userid=" + accountid + "; expires=" + date.toUTCString() + ";";
        window.location.href = global_variable.clientUrl + "/Login";
    };

    return (
        <IonPage>
            <IonHeader style={{ textAlign: 'center' }}>
                <IonToolbar color="primary">
                    <IonTitle>个人中心</IonTitle>
                </IonToolbar>
            </IonHeader>

            <IonContent className="ion-padding">
                <div hidden={!hidden} style={{ width: '100%', height: '12%', textAlign: 'center' }}>
                    <IonButton shape="round" color='warning' fill="outline" href="/login">登录/注册</IonButton>
                </div>
                <IonList style={{ marginLeft: '-20px' }}>
                    <IonItem href="/home">
                        <IonIcon icon={wallet} />&nbsp;&nbsp;
                        <IonLabel style={{ fontSize: '16px' }}>我的存管账户</IonLabel>
                    </IonItem>
                    <IonItem>
                        <IonIcon icon={card} />&nbsp;&nbsp;
                        <IonLabel style={{ fontSize: '16px' }}>我的还款卡</IonLabel>
                    </IonItem>
                    <IonItem>
                        <IonIcon icon={contrast} />&nbsp;&nbsp;
                        <IonLabel style={{ fontSize: '16px' }}>我的合同</IonLabel>
                    </IonItem>
                    <IonItem hidden={myInfo} href='/BaseInfo'>
                        <IonIcon icon={map} />&nbsp;&nbsp;
                        <IonLabel style={{ fontSize: '16px' }}>我的资料</IonLabel>
                    </IonItem>
                    <IonItem>
                        <IonIcon icon={informationCircle} />&nbsp;&nbsp;
                        <IonLabel style={{ fontSize: '16px' }}>关于</IonLabel>
                    </IonItem>
                </IonList>
                <div style={{ width: '100%', height: '12%', textAlign: 'center' }}>
                    <IonButton onClick={e => LogOut()} color="warning" hidden={hidden} shape="round" fill="outline">注销</IonButton>
                </div>
            </IonContent>

            <IonTabBar>
                <IonTabButton tab="Home" href='/Home'>
                    <IonIcon icon={home} />
                    <IonLabel>首页</IonLabel>
                </IonTabButton>
                <IonTabButton selected={false} tab="help" href="">
                    <IonIcon icon={help} />
                    <IonLabel>帮助</IonLabel>
                </IonTabButton>
                <IonTabButton tab="bit" href="">
                    <IonIcon icon={logoBitcoin} />
                    <IonLabel>账单</IonLabel>
                </IonTabButton>
                <IonTabButton selected={true} tab="My" href='/My'>
                    <IonIcon icon={person} />
                    <IonLabel>我的</IonLabel>
                </IonTabButton>
            </IonTabBar>
        </IonPage>
    );
};

export default My;
